<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/easyui/themes/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath }/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript">
         //工具栏
        var toolbar=[{
            text:"查询",
            iconCls:"icon-ok",
            handler:function () {
                alert("查询");
            }
        },{
            text:"新增",
            iconCls:"icon-add",
            handler:function () {
                alert("新增");
            }
        }];

         $(function () {
             $('#tab').datagrid({
                 title:"用户列表",//表格标题
                 iconCls:"icon-save",//小图标
                 url:"/test/getData",//远程数据请求地址
                 columns:[[ //列定义对象
                     {field:'id',title:'ID',width:100,align:'center'},
                     {field:'name',title:'用户名',width:100,align:'center'},
                     {field:'hobby',title:'爱好',width:100,align:'center'
                         ,formatter:function (value,row,index) {
                             /*
                              * value：字段值。
                                rowData：行记录数据。
                                rowIndex: 行索引。
                              * */
                            /* console.log(value);
                             console.log(row);*/
                             return value.name.id;
                         }}
                 ]],
                 pagination:true,//开启分页控件
                 //toolbar:toolbar//引入工具栏集合
                 toolbar:"#tb"//引入外置div
             });


         });

         //查询方法
         function query() {
            /* $('#tab').datagrid({
                 //在请求远程数据的时候发送额外的参数。
                 queryParams: {
                     name:$("#name").textbox("getValue")
                 }
             });*/

            /* $('#tab').datagrid("load",{ //从第一页开始重新加载数据
                 name:$("#name").textbox("getValue")
             });*/

             $('#tab').datagrid("reload",{ //从当前页开始重新加载数据
                 name:$("#name").textbox("getValue")
             });
         }
    </script>
</head>
<body>
   <table id="tab"></table>
   <div id="tb" style="padding: 3px;">
        <input id="name" class="easyui-textbox" name="name"/>
       <button type="button" onclick="query()">查询</button>
   </div>
</body>
</html>